AJAX

通过AJAX技术，可以实现以无刷新的方式更新HTML元素中的内容。AJAX并不是一种新的技术，其为4种技术的结合，分别是JavaScript、CSS、DOM和XMLHttpRequest，前三种技术都是客户端技术，它们和服务器一点关系都没有，而XMLHttpRequest和服务器有着密不可分的关系。

XMLHttpRequest的原理就是一个发送HTTP请求的客户端组件，开发人员可以根据不同的情况选择以同步或者异步的方式来发送HTTP请求，并获得服务器的响应信息。

使用XMLHttpRequest获得Web资源

XMLHttpRequest组件是以COM组件形式发布的，因此在客户端需要使用以下的代码创建一个XMLHttpRequest对象：

1
2
var myRequest;
myRequest = new ActiveXObject("Microsoft.XMLHTTP");

在XMLHttpRequest对象中有一个open方法，负责向服务器发送HTTP请求信息，这个方法有三个参数，第一个参数是HTTP请求方法（GET、POST），第二个参数是服务端的URL，第三个参数指定了XMLHttpRequest对象是以同步还是以异步的方式发送请求信息，如果为true，则以异步的方式发送，如果为false，则以同步的方式发送。

XMLHttpRequest的send方法负责向服务端发送数据。

  • 同步方式

    1
    2
    3
    4
    5
    6
    var myRequest = getXMLHTTPRequest();
    if (myRequest) {
        myRequest.open("POST", "url", false); // 同步发送HTTP请求信息
        myRequest.send(null); // 向服务端发送空数据
        alert(myRequest.reponseText); // 获得并显示HTTP响应消息
    }

  • 异步方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var myRequest = getXMLHTTPRequest();
    if (myRequest) {
        // 建立一个用于接收异步响应消息的方法
        myRequest.onreadystatechange = function() {
            // 状态为4表示响应消息成功返回
            if (myRequest.readyState == 4) {
              	alert(myRequest.reponseText);
            }
        };
        myRequest.open("POST", "/webdemo/servlet/AjaxEncode", true);
        myRequest.send(null);
    }

小知识

跨域访问：A上的页面获取B上的资源，浏览器会检查服务器B的HTTP头（HEAD请求），如果Access-Control-Allow-Origin中有A，或者是通配符*，浏览器就会允许跨域。